<template>
  <div id="Home">
    <div class="home_background"></div>
    <!-- 流星动画 -->
    <!-- <div class="meteor meteor1"></div>
    <div class="meteor meteor2"></div>
    <div class="meteor meteor3"></div>
    <div class="meteor meteor4"></div>
    <div class="meteor meteor5"></div> -->

    <div class="wrapper">
      <!-- pc轮播图部分 -->
      <div class="pcSwipe" v-if="interval">
        <el-carousel
          trigger="click"
          :interval="interval"
          arrow="never"
          :indicator="false"
        >
          <el-carousel-item
            v-for="(item, index) in carouselImages"
            :key="index"
          >
            <img
              class="bannerImg"
              :src="show_url + item.img"
              @click="gotoBanner(item)"
            />
          </el-carousel-item>
        </el-carousel>

        <!-- <div class="banner_discribe">
          <p>METAUP</p>
          <p>获得属于自己的数字藏品</p>
          <p>创世NFT即将发行</p>
          <p @click="gotoMail">
            <span>前往查看</span>
            <img src="../assets/images/pc_black/home/look.png" />
          </p>
          <p>了解METAUP</p>
        </div> -->
        <div class="banner_discribe_notice" v-show="!isHiddenNotice">
          <pc-home-notice
            @hiddenNotice="hiddenNotice"
            @showNotice="showNotice"
          ></pc-home-notice>
        </div>
      </div>

      <!-- pc推荐数字产品部分 -->
      <div class="recommend">
        <!-- 推荐顶部 -->
        <div class="recommend_top">
          <div class="recommend_top_font">推荐数字藏品</div>
          <span class="recommend_top_subtitle">
            这里涵盖了包罗万象的数字藏品，您可以选择任意一款让它成为你的“专属”藏品
          </span>
        </div>

        <!-- 推荐底部 -->
        <div class="recommend_bottom">
          <PcHomeProducts
            :productList="productList"
            :show_url="show_url"
            @buyProduct="buyProduct"
          />
        </div>
      </div>

      <!-- pc优势部分 -->
      <div class="advantage">
        <!-- 优势顶部 -->
        <div class="advantage_top">
          <div class="advantage_top_font">我们的优势</div>
          <span class="advantage_top_subtitle">
            以文熙链区块链技术基础，秉承合法合规、公开透明的原则，为用户提供真实可信的数字藏品购买和服务体验
          </span>
        </div>

        <!-- 优势底部 -->
        <div class="advantage_bottom">
          <div class="advatage_bottom_item">
            <img
              class="advatage_bottom_item_image"
              src="@/assets/images/pc_black/home/advantage1.png"
              alt=""
            />
            <div class="advatage_bottom_item_title">安全可信</div>
            <div class="advatage_bottom_item_content">
              依托区块链溯源，作品铸造链上留痕，来源可溯，记录可查，版权可信。
            </div>
          </div>
          <div class="advatage_bottom_item">
            <img
              class="advatage_bottom_item_image"
              src="@/assets/images/pc_black/home/advantage2.png"
              alt=""
            />
            <div class="advatage_bottom_item_title">用户体验</div>
            <div class="advatage_bottom_item_content">
              用户无需配合，眨眼交互，秒级验证通过，提升用户认证体验。
            </div>
          </div>
          <div class="advatage_bottom_item">
            <img
              class="advatage_bottom_item_image"
              src="@/assets/images/pc_black/home/advantage3.png"
              alt=""
            />
            <div class="advatage_bottom_item_title">作品众多</div>
            <div class="advatage_bottom_item_content">
              拥有独家数字藏品作品，作品分类涵盖范围广。
            </div>
          </div>
        </div>
      </div>

      <!-- 合作伙伴部分 -->
      <div class="friends">
        <!-- 合作伙伴顶部 -->
        <div class="friends_top">
          <div class="friends_top_font">合作伙伴</div>
        </div>

        <!-- 合作伙伴底部 -->
        <div class="friends_bottom">
          <FriendSwiper
            :friendsImages="friendsImages"
            :show_url="show_url"
            @gotoFriends="gotoFriends"
          />
        </div>
      </div>
    </div>

    <div class="m_wrapper">
      <!-- mobile搜索栏和轮播图的大背景 -->
      <div class="head_background">
        <!-- 移动端搜索栏 -->
        <div class="mTopDiv">
          <div class="left_logo">
            <img
              src="@/assets/images/mobile_black/home/logo.png"
              @click="gotoHome"
            />
          </div>
          <div class="center_search" @click="gotoSearch">
            <!-- 放大镜 -->
            <img src="@/assets/images/mobile_black/home/search.png" />

            <!-- 中间搜索框 -->
            <div class="search_box" :class="{ hasAppSearch: isApp !== true }">
              搜索数字产品
            </div>
          </div>

          <div
            class="right_notice"
            :class="{ hasAppNotice: isApp !== true }"
            @click="gotoNotice"
            v-if="isLogin && noticeNum > 0"
          >
            <el-badge is-dot class="noticeDot">公告</el-badge>
          </div>
          <div
            v-else
            class="right_notice"
            :class="{ hasAppNotice: isApp !== true }"
            @click="gotoNotice"
          >
            公告
          </div>
          <div class="right_app" @click="gotoApp" v-if="isApp !== true">
            APP
          </div>
        </div>

        <!-- 移动端轮播图 -->
        <div class="mSwipe">
          <MobileHomeBanner
            :show_url="show_url"
            :interval="m_interval"
            :carouselImages="carouselImages"
            @gotoBanner="gotoBanner"
          />
        </div>
      </div>

      <!-- mobile显示推荐数字产品 -->
      <div
        class="mShowProducts"
        :class="{
          mAuthentication_bar: !userInfo.is_auth || userInfo.is_auth === 0,
        }"
      >
        <!-- 灰色背景隔开div -->
        <!-- <div class="greyDiv"></div> -->
        <MobileHomeProducts
          :productList="productList"
          :show_url="show_url"
          @buyProduct="buyProduct"
        />
      </div>

      <!-- mobile底部实名认证 -->
      <div
        :class="{ ios_mAuthentication: isIOS }"
        class="mAuthentication"
        v-if="userInfo.is_auth === 0"
      >
        <div class="mAuthentication_left">
          <img src="@/assets/images/mobile_black/home/authentication.png" />
          <span>实名认证后才能支付购买数字藏品</span>
        </div>
        <md-button @click="gotoAuthentication">去实名</md-button>
      </div>
    </div>

    <!-- 绑定弹窗 -->
    <van-dialog
      class="bind_dialog"
      v-model="isShowBundlePhoneDialog"
      :show-confirm-button="false"
    >
      <div class="dialog_center">
        <div class="input_box">
          <div class="first_line">
            <span>手机号码</span>
            <input
              type="tel"
              placeholder="手机号码"
              maxlength="11"
              @input="phoneInputing"
              @blur="phoneBlur"
              v-model.trim="formData.phone"
            />
          </div>
          <div class="second_line">
            <span>验证码</span>
            <input
              type="tel"
              placeholder="验证码"
              maxlength="6"
              @input="codeInputing"
              @blur="codeBlur"
              v-model.trim="formData.code"
            />
          </div>

          <button
            :class="{ opacityHalf: isCodeBtnDisabled }"
            :disabled="isCodeBtnDisabled"
            @click="getCode"
            class="mGetCode"
          >
            {{ codeBtnContent }}
          </button>
        </div>
      </div>

      <div class="bottom_btn">
        <van-button class="cancel_btn" @click="isShowBundlePhoneDialog = false"
          >取消</van-button
        >
        <van-button class="confirm_btn" @click="bundleLogin">确定</van-button>
      </div>
    </van-dialog>

    <!-- 公告弹窗 -->
    <NoticeDialog
      :isShowNoticeDialog="isShowNoticeDialog"
      :total="total"
      :currentPage="currentPage"
      :noticeData="noticeData"
      @changePage="changePage"
    ></NoticeDialog>
  </div>
</template>

<script>
import ProductCard from "@/components/cards/ProductCard.vue";
import Collapse from "@/components/Collapse.vue";
import PcHomeProducts from "./home/PcHomeProducts.vue";
import MobileHomeBanner from "./home/MobileHomeBanner.vue";
import MobileHomeProducts from "./home/MobileHomeProducts.vue";
import FriendSwiper from "./home/FriendSwiper.vue";
import NoticeDialog from "./home/NoticeDialog.vue";
import PcHomeNotice from "./home/PcHomeNotice.vue";

import {
  getRecommendGoodsApi,
  getBannerListApi,
  createOrderApi,
  getPartnerListApi,
  wxOAuthApi,
  wxLoginApi,
  bindPhoneApi,
  sendRegisterVerifyCodeApi,
  noticeInfoApi,
} from "@/api";
import { iscode, getWidth, isWeixin, isIOS } from "@/utils";
import { mapMutations, mapState, mapActions } from "vuex";
import { required } from "vuelidate/lib/validators";
import { phoneReg } from "@/utils/regular";
import { setCookie } from "@/utils/cookie.js";
import { css } from "../../vue.config";

export default {
  name: "Home",
  components: {
    ProductCard,
    Collapse,
    MobileHomeBanner,
    MobileHomeProducts,
    PcHomeProducts,
    FriendSwiper,
    NoticeDialog,
    PcHomeNotice,
  },
  data() {
    return {
      // 轮播图图片收纳
      carouselImages: [],
      // 轮播图自动切换时间间隔
      interval: 0,
      m_interval: 0,
      // 合作伙伴图片收纳
      friendsImages: [],
      // collapse头部标题（需要数组形式传给Collapse组件）
      collapseTitle: ["如何创建一个新用户", "如何购买数字藏品"],
      // collapse展开内容（根据头部标题的顺序，md-collapse-pane-顺序数字，一一对应）
      collapseContent: [
        "您需要完成以下步骤，才可开始在平台上购买数字藏品，让我们开始吧。使用手机号创建账号，提交身份资料，进行身份认证，完成身份认证后，个人可以去浏览商城、购买数字藏品等。",
        "购买数字藏品的前提是您需要完成认证后，您可以在商城搜索或浏览数字藏品商品。在数字藏品商品详情页，您可以完成购买；点击购买按钮，通过微信和支付宝进行支付从而完成藏品的购买。",
      ],
      // collapse当前默认选中展示的索引
      activeTab: 1,
      // collapse头部标题右侧的箭头图标（传给Collapse组件）
      icon: "keyboard_arrow_down",
      // 下拉加载
      pullObject: {
        loading: false,
        finished: false,
        refreshing: false,
      },
      // 推荐商品数据
      productList: [],
      // 图片地址
      show_url: "",
      isIos: false,
      currentSelect: "",
      isMouseOver: false,
      m_wxCode: "",
      platform: 1, //  "platform":1PC 2手机
      openid: "",
      // 是否显示绑定手机号的弹窗
      isShowBundlePhoneDialog: false,
      // 表单数据手机（绑定手机号）
      formData: {
        phone: "",
        code: "",
      },
      // 是否是第一次进来（刚进来不验证）
      isFirst_phone: true,
      isFirst_code: true,
      // 验证码按钮是否禁用
      isCodeBtnDisabled: true,
      // 验证码开启计时
      codeBtnCount: 60,
      byClick: false,
      timer: null,
      isCounting: false,
      isIOS: false,
      is_auth: "",
      inviteCode: "",
      onebuy_code: "",
      query_id: "",
      // 公告
      total: 0,
      noticeData: {},
      currentPage: 1,
      noticeNum: 0,
      isLogin: false,
      isApp: JSON.parse(localStorage.getItem("isApp")),
    };
  },
  // vuelidate验证表单
  validations: {
    formData: {
      phone: {
        required,
        phoneReg,
      },
      code: {
        required,
      },
    },
  },
  computed: {
    ...mapState(["userInfo", "wxCode", "isShowNoticeDialog", "isHiddenNotice"]),
    codeBtnContent() {
      if (this.isCodeBtnDisabled && this.byClick === true) {
        return "剩余" + this.codeBtnCount + "s";
      } else {
        return "获取验证码";
      }
    },
  },
  created() {
    this.isIOS = isIOS();
    // 获取首页商品列表
    this.getRecommendGoods();
    // 获取首页合作伙伴
    this.getPartnerList();

    let isLogin = JSON.parse(localStorage.getItem("isLogin"));
    if (
      this.getParams(location.href) !== null &&
      isWeixin() &&
      getWidth() <= 768
    ) {
      // 1.先取出state
      if (this.getParams(location.href).state) {
        // 2.去除末尾的 #/
        let query_params = this.getParams(location.href).state.slice(0, -2);
        // 3.以+分割，左侧是invite_code/onebuy_code 右侧是id   （没有则是-1）
        let query_code = query_params.split("+")[0]; // invite_code 或者 onebuy_code
        let query_id = query_params.split("+")[1]; // goods_id
        // 4.如果invite_code/onebuy_code存在，则以-分割，判断是invite_code 还是 onebuy_code
        if (query_code && query_code != -1) {
          if (query_code.split("-")[0] == "I") {
            this.inviteCode = query_code.split("-")[1];
            // console.log(this.inviteCode);
          } else {
            this.onebuy_code = query_code.split("-")[1];
            // console.log(this.onebuy_code);
          }
        }
        if (query_id && query_id != -1) {
          this.query_id = query_id;
        }
        // 5.id存在 则需要跳转
        if (isLogin === true && this.query_id && this.query_id != -1) {
          let isJump = JSON.parse(window.localStorage.getItem("isJump"));
          if (!isJump) {
            this.$router.push({
              path: "/mail/productDetail",
              query: {
                id: this.query_id,
              },
            });
            window.localStorage.setItem("isJump", JSON.stringify(true));
          }
        }
      }
      this.getWxCode(this.getParams(location.href).code);
      this.m_wxCode = this.getParams(location.href).code;
      if (this.m_wxCode && (isLogin === false || !isLogin)) {
        this.wxLogin();
      }
      this.wxOAuth();
    } else if (getWidth() <= 768 && !isWeixin()) {
      if (isLogin === true && this.$route.query.id) {
        this.$router.push({
          path: "/mail/productDetail",
          query: {
            id: this.$route.query.id - 0,
          },
        });
      }
    }

    if (
      getWidth() <= 768 &&
      !isLogin &&
      (this.$route.query.id ||
        this.$route.query.onebuy_code ||
        this.$route.query.inviteCode)
    ) {
      this.$router.push({
        path: "/login",
        query: {
          phone: this.phone,
          inviteCode: this.$route.query.inviteCode ?? "",
          onebuy_code: this.$route.query.onebuy_code ?? "",
          id: this.$route.query.id ?? "",
        },
      });
    }

    // if (isLogin) {
    //   this.getUserInfo();

    //   if (getWidth() <= 768) {
    //     this.noticeInfo();
    //   }
    // }
    if (
      this.getParams(location.href) &&
      this.getParams(location.href).isApp &&
      getWidth() <= 768
    ) {
      window.localStorage.setItem("isApp", JSON.stringify(true));
    } else {
      let isApp = JSON.parse(window.localStorage.getItem("isApp"));
      if (isApp == true) {
        window.localStorage.setItem("isApp", JSON.stringify(true));
      } else {
        window.localStorage.setItem("isApp", JSON.stringify(false));
      }
      // window.localStorage.setItem("isApp", JSON.stringify(false));
    }
  },
  mounted() {
    // alert(JSON.parse(window.localStorage.getItem("isApp")));
    this.$nextTick(() => {
      // 获取轮播图列表
      this.getBannerList();
    });
    if (getWidth() <= 768) {
      this.platform = 2;
    } else {
      this.platform = 1;
    }
    this.isIosFun();

    let isLogin = JSON.parse(localStorage.getItem("isLogin"));
    if (isLogin) {
      this.isLogin = true;
      this.getUserInfo();
      this.noticeInfo();

      // 如果没有，就给一个0
      let noticeNum = localStorage.getItem("noticeNum");
      if (!noticeNum || noticeNum < 0) {
        localStorage.setItem("noticeNum", JSON.stringify(0));
      } else {
        const that = this;
        // 如果有，则算一下新的数量与上一次数量的差
        setTimeout(() => {
          that.noticeNum = that.userInfo.notice_num - parseInt(noticeNum);
        }, 500);
      }
    } else {
      this.isLogin = false;
    }
  },
  methods: {
    // -----vuex------
    ...mapActions(["getUserInfo"]),

    // -----异步相关方法-----
    // 获取首页推荐商品
    async getRecommendGoods() {
      let result = await getRecommendGoodsApi();
      if (iscode(result)) {
        this.productList = result.result.list;
        this.show_url = result.result.show_url;
        this.productList.map((item, index) => {
          this.$set(item, "now_time", result.result.now_time);
          let date, month, day, time;
          if (item.pre_start_time) {
            date = item.pre_start_time.split(" ")[0].split("-");
            month = date[1] + "月";
            day = date[2] + "日";
            time =
              month +
              day +
              item.pre_start_time.split(" ")[1].substr(0, 5) +
              "开售";
            this.$set(item, "sellTime", time);
            this.countTime(result, this.productList);
            this.overTime(item);
          }
        });
      }
    },
    // 获取轮播图列表
    async getBannerList() {
      let result = await getBannerListApi();
      if (iscode(result)) {
        this.carouselImages = result.result.list;
        this.interval = result.result.rolling_time * 1000;
        if (getWidth() <= 768) {
          this.m_interval = result.result.rolling_time * 1000;
        }
      }
    },
    // 获取合作伙伴列表
    async getPartnerList() {
      let res = await getPartnerListApi();
      if (iscode(res)) {
        this.friendsImages = res.result.list;
        this.show_url = res.result.show_url;
      }
    },
    // 创建订单
    async createOrder(payload) {
      // --- 1.已售空的情况(已调整，现在售空的情况按钮直接禁止点击了)
      if (payload.goods_stock === 0) {
        if (!localStorage.getItem("isLogin")) {
          this.$message({
            message: "请先登录！",
            iconClass: "myErrorIcon",
            customClass: "myError",
          });
          return;
        }
        this.$message({
          message: "该商品已售空",
          iconClass: "myErrorIcon",
          customClass: "myError",
        });
        return;
      }
      let result = await createOrderApi({
        goods_id: payload.id,
        hashcode:
          "0x456543fd67hsd3hhjsdb5456543fd67hsd3hhjsdb5456543fd67hsd3hhjsdb5456543fd67hsd3hhjsdb5",
        platform: this.platform,
      });
      // --> 对是否能够进入订单界面进行分情况判断(先得通过登录，再通过身份认证，并且不是售空或预售的情况，才可以正常购买)：
      if (result.code === 0) {
        // --- 2.正常通过的情况
        this.$router.push({
          path: "/mail/confirmProducts",
          query: {
            id: payload.id,
            order_sn: result.result.order.order_sn,
            order_id: result.result.order.id,
          },
        });
      } else if (result.code === 200019) {
        // --- 3.未实名认证的情况
        this.$message({
          message: result.message,
          iconClass: "myErrorIcon",
          customClass: "myError",
        });
      } else if (result.code === 400004) {
        // --- 4.未登录的情况
        this.$message({
          message: result.message,
          iconClass: "myErrorIcon",
          customClass: "myError",
        });
      } else if (result.code === 200025) {
        // --- 5.预售的情况
        this.$message({
          message: result.message,
          iconClass: "myErrorIcon",
          customClass: "myError",
        });
        return;
      }
    },
    // 获取手机验证码（绑定手机号弹窗里的）
    async getCode() {
      let regExp = new RegExp(/^1(2|3|4|5|6|7|8|9)\d{9}$/);
      if (!this.formData.phone) {
        this.$toast("手机号码不能为空");
        return;
      } else if (!regExp.test(this.formData.phone)) {
        this.$toast("请检查手机号码是否有误");
        return;
      }
      this.isCounting = true;
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.byClick = true;

      let result = await sendRegisterVerifyCodeApi({
        phone: this.formData.phone,
      });
      if (iscode(result)) {
        this.$toast(result.message);
        this.codeBtnCount = 60;
        this.isCodeBtnDisabled = true;
        this.timer = setInterval(() => {
          this.codeBtnCount = this.codeBtnCount - 1;
          if (this.codeBtnCount === 0 && this.timer) {
            clearInterval(this.timer);
          }
        }, 1000);
        setTimeout(() => {
          this.isCodeBtnDisabled = false;
          this.isCounting = false;
          this.phoneBlur();
        }, 60000);
      }
    },
    // weixin
    async wxOAuth() {
      let res = await wxOAuthApi({
        code: this.wxCode,
      });
    },
    // weixin
    async wxLogin() {
      let res = await wxLoginApi({
        code: this.m_wxCode,
      });
      if (iscode(res)) {
        if (res.code === 0) {
          if (res.result && res.result.is_first_login === 0) {
            // 以前登录过（重置定时器的数据，并且关闭所有弹窗，跳过通过正常登录流程直接登录成功）
            window.localStorage.setItem("isLogin", true);
            setCookie("token", res.result.token, 7);
            window.localStorage.setItem(
              "token",
              JSON.stringify(res.result.token)
            );
            this.$toast("登录成功");
            // this.$router.replace("/");

            if (this.query_id) {
              this.$router.push({
                path: "/mail/productDetail",
                query: {
                  id: this.query_id - 0,
                },
              });
            }
          } else if (res.result && res.result.is_first_login === 1) {
            this.openid = res.result.openid;
            // 第一次登录，需要绑定手机号（重置定时器数据，开始绑定手机号码弹窗，如果不绑定则关闭所有弹窗，登录不成功。如果绑定成功，则关闭所有弹窗，跳过通过正常登录流程直接登录成功）
            this.isShowBundlePhoneDialog = true; // 开启绑定手机号弹窗
          }
        } else {
          // code不是0，意外错误
          this.$toast("啊哦，不小心出错了～，请稍后重试。");
        }
      }
    },
    // 移动端微信确认绑定
    async bundleLogin() {
      let regExp = new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/);

      if (!this.formData.phone) {
        this.$toast("手机号码不能为空");
        return;
      } else if (!regExp.test(this.formData.phone)) {
        this.$toast("请检查手机号码是否有误");
        return;
      } else if (!this.formData.code) {
        this.$toast("验证码不能为空");
        return;
      }
      let res = await bindPhoneApi({
        openid: this.openid,
        nickname: "",
        headimgurl: "",
        phone: this.formData.phone,
        code: this.formData.code,
        invite_code: this.inviteCode ?? "",
        onebuy_code: this.onebuy_code ?? "",
      });
      if (iscode(res)) {
        this.isShowBundlePhoneDialog = false;
        window.localStorage.setItem("isLogin", true);
        setCookie("token", res.result.token, 7);
        window.localStorage.setItem("token", JSON.stringify(res.result.token));
        this.initFormData();
        this.$toast("登录成功");

        if (this.query_id) {
          this.$router.push({
            path: "/mail/productDetail",
            query: {
              id: this.query_id - 0,
            },
          });
        }
      }
    },
    // 请求公告
    async noticeInfo() {
      let pcFirstLogin = JSON.parse(
        window.localStorage.getItem("pcFirstLogin")
      );
      let phoneFirstLogin = JSON.parse(
        window.localStorage.getItem("phoneFirstLogin")
      );

      let res = await noticeInfoApi({
        page: this.currentPage,
        pagesize: 1,
      });
      if (iscode(res)) {
        this.total = res.result.count;
        this.noticeData = res.result.list[0] || {};

        if (res.result.count === 0) {
          this.$store.commit("closeNoticeDialog");
          this.hiddenNotice();
        } else {
          // let oldNoticeData = window.localStorage.getItem("oldNoticeData");

          if (getWidth() > 768) {
            // pc
            // if ( pcFirstLogin === true || JSON.stringify(this.noticeData) !== pc_oldNoticeData ) {
            //   this.showNotice();
            // }

            if (pcFirstLogin === true) {
              this.showNotice();
            }
          } else {
            // mobile
            // if ( phoneFirstLogin === true || JSON.stringify(this.noticeData) !== phone_oldNoticeData ) {
            //   this.$store.commit("openNoticeDialog");
            // }

            if (phoneFirstLogin === true) {
              this.$store.commit("openNoticeDialog");
            }
          }
        }
      }
    },

    // -----功能性方法-----
    // store里的方法
    ...mapMutations(["getWxCode"]),

    // 是否超时
    overTime(item) {
      let startDate, endDate;
      if (isIOS()) {
        startDate = new Date(item.now_time.replace(/-/g, "/"));
        endDate = new Date(item.pre_end_time.replace(/-/g, "/"));
        // console.log("ios");
      } else {
        startDate = new Date(item.now_time);
        endDate = new Date(item.pre_end_time);
        // console.log("not ios");
      }
      let now = startDate.getTime();
      let end = endDate.getTime();
      if (end - now > 0) {
        this.$set(item, "isOverTime", false);
      } else {
        this.$set(item, "isOverTime", true);
      }
      // console.log(item);
    },
    countTime(result, list) {
      list.map((item, index) => {
        if (item.is_buy == 0) {
          let startDate, endDate;
          if (this.isIos == true) {
            startDate = new Date(result.result.now_time.replace(/-/g, "/"));
            endDate = new Date(item.pre_start_time.replace(/-/g, "/"));
          } else {
            startDate = new Date(result.result.now_time);
            endDate = new Date(item.pre_start_time);
          }
          let now = startDate.getTime();
          let end = endDate.getTime();
          let leftTime = end - now;
          if (leftTime * 1 > 0) {
            this.$set(item, "countTimeStatus", 1);
          } else {
            this.$set(item, "countTimeStatus", 0);
          }
        }
      });
    },

    // 用于切换notice页数
    changePage(page) {
      this.currentPage = page;
      this.noticeInfo();
    },
    // 用于关闭notice框
    hiddenNotice() {
      // this.isHiddenNotice = true;
      this.$store.commit("closeHomeNotice");
    },
    // 用于显示notice框
    showNotice() {
      // this.isHiddenNotice = false;
      this.$store.commit("openHomeNotice");
    },
    // 用于切换collapse时拿到索引，动态显示对应的内容
    changeTab(index) {
      this.activeTab = index;
    },
    // 下拉加载
    onLoad() {
      this.pullObject.refreshing = false;
      this.pullObject.loading = false;
      this.pullObject.finished = true;
    },
    onRefresh() {
      // 清空列表数据
      this.pullObject.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.pullObject.loading = true;
      this.onLoad();
    },
    changeBuy(val) {
      if (val.is_buy === 1 && val.goods_stock > 0) {
        return "立即购买";
      } else if (val.is_buy === 0 && val.goods_stock > 0) {
        return "预售";
      } else {
        return "已售空";
      }
    },
    isIosFun() {
      const u = navigator.userAgent;
      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isiOS) {
        this.isIos = true;
      } else {
        this.isIos = false;
      }
    },

    // ----- 验证相关 ------
    //截取网址字符串
    getParams(url) {
      //我们只要问号后面的字符串
      if (url) {
        var arr = url.split("?");
        if (arr.length > 1) {
          var params = arr[1];
          var arr1 = params.split("&");
          var o = {};
          //因为arr1里面有多个元素，都要切割，所以我们需要遍历循环。
          for (var i = 0; i < arr1.length; i++) {
            // console.log(arr[i]);
            var newArr = arr1[i].split("=");
            // console.log(newArr);
            o[newArr[0]] = newArr[1];
          }
          return o;
        } else {
          return null;
        }
      } else {
        return null;
      }
    },
    // 初始化表单数据
    initFormData() {
      // 清空表单数据
      this.formData = {
        phone: "",
        code: "",
      };
      // 保持每次重新点开都是第一次进入状态
      this.isFirst_phone = true;
      this.isFirst_code = true;
      this.isCodeBtnDisabled = false;
      this.wxTimerNum = 0;
    },
    // 手机输入框失去焦点时触发
    phoneBlur() {
      this.isFirst_phone = false; // 修改成不是第一次进入了
      this.$v.formData.phone.$touch();
      if (this.isCounting === false) {
        if (this.$v.formData.phone.$invalid === false) {
          this.isCodeBtnDisabled = false;
        } else {
          this.isCodeBtnDisabled = true;
          this.byClick = false;
        }
      }
    },
    // 手机输入框输入时，正则限制只能输入数字
    phoneInputing() {
      this.isFirst_phone = true; // 在输入的时候让提示不现实，只有失去焦点时才显示验证结果
      this.$nextTick(() => {
        this.formData.phone = this.formData.phone.replace(/[^\d]/g, "");
      });
      if (this.isCounting === false) {
        if (this.$v.formData.phone.$invalid === false) {
          this.isCodeBtnDisabled = false;
        } else {
          this.isCodeBtnDisabled = true;
          this.byClick = false;
        }
      }
      if (!this.$v.formData.$invalid) {
        this.cantSubmit = false;
      } else {
        this.cantSubmit = true;
      }
    },
    // 验证码输入框失去焦点时触发
    codeBlur() {
      this.isFirst_code = false; // 修改成不是第一次进入
      this.$v.formData.code.$touch();
    },
    // 验证码输入框输入时，不现实验证结果
    codeInputing() {
      this.isFirst_code = true; // 在输入的时候让提示不现实，只有失去焦点时才显示验证结果
      if (!this.$v.formData.$invalid) {
        this.cantSubmit = false;
      } else {
        this.cantSubmit = true;
      }
    },

    // -----跳转相关方法-----
    // 跳转到对应商品的界面
    buyProduct({ id }) {
      this.$router.push({
        path: "/mail/productDetail",
        query: {
          id: id,
        },
      });

      if (getWidth() <= 768) {
        localStorage.setItem("shopPath", "/");
      }
    },
    // 点击购买直接跳转到确认订单界面
    buyProductDeep(payload) {
      this.createOrder(payload);
      if (getWidth() <= 768) {
        localStorage.setItem("shopPath", "/");
      }
    },
    gotoBanner({ url }) {
      if (url) {
        location.assign(url);
      }
    },
    gotoFriends(url) {
      if (url === "" || url === null) {
        return;
      }
      location.assign(url);
    },
    // 跳转到搜索界面
    gotoSearch() {
      this.$router.push("/search");
    },
    // 跳转到主页
    gotoHome() {
      this.$router.push("/");
    },
    gotoAuthentication() {
      this.$router.push("/authentication");
    },
    // 跳转到商城
    gotoMail() {
      this.$router.push("/mail");
    },
    // 跳转到公告界面
    gotoNotice() {
      this.$router.push("/noticeList");
    },
    //跳转APP下载
    gotoApp() {
      this.$router.push("/appDownload");
    },
  },
};
</script>

<style lang="less" scoped>
#Home {
  width: 100%;
  padding-bottom: 100px;

  .home_background {
    width: 1920px;
    height: 2395px;
    background-image: url("../assets/images/pc_black/home/big_background.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .wrapper {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 1200px;
    margin: 0 auto;
    z-index: 9;
  }

  .m_wrapper {
    display: none;
  }

  // >>轮播图部分
  .pcSwipe {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 30px;

    /deep/.el-carousel {
      height: 600px;
      border-radius: 0;
    }

    /deep/.el-carousel__container {
      width: 100%;
      height: 100% !important;

      .bannerImg {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }

    /deep/.el-carousel__indicators {
      margin-bottom: 25px !important;
    }

    /deep/.el-carousel__indicator {
      width: 40px !important;
      height: 5px !important;
      background: #ffffff;
      border-radius: 5px;
      opacity: 0.5;
      margin: 0 !important;
    }

    /deep/.el-carousel__indicator.is-active {
      opacity: 1;
      transform: none;
      transform: scale(1.1);
    }

    .banner_discribe {
      position: absolute;
      top: 100px;
      left: 30px;
      display: flex;
      flex-direction: column;
      width: 368px;
      height: 368px;
      background-image: url("../assets/images/pc_black/home/banner_background.png");
      background-size: 100% 100%;
      background-position: center center;
      padding: 80px 0 0 30px;
      z-index: 99;

      p {
        margin: 0;
        padding: 0;
        font-family: FZLTHJW--GB1-0, FZLTHJW--GB1;
        font-weight: normal;
        color: #ffffff;
      }

      p:nth-child(1) {
        font-size: 28px;
        line-height: 28px;
        background: linear-gradient(315deg, #00ffb0 0%, #ff8686 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
      }

      p:nth-child(2) {
        font-size: 28px;
        line-height: 28px;
        background: linear-gradient(315deg, #00ffb0 0%, #ff8686 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-top: 10px;
        font-weight: bold;
      }

      p:nth-child(3) {
        font-size: 18px;
        line-height: 18px;
        margin-top: 20px;
      }

      p:nth-child(4) {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url("../assets/images/pc_black/home/gotoBtn_color.png");
        background-size: 100% 100%;
        background-position: center center;
        width: 170px;
        height: 36px;
        margin-top: 40px;
        cursor: pointer;

        span {
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #1e2020;
          line-height: 16px;
        }

        img {
          width: 28px;
          height: 8px;
          margin-left: 18px;
        }
      }

      p:nth-child(5) {
        font-size: 14px;
        line-height: 14px;
        margin-top: 20px;
      }
    }

    .banner_discribe_notice {
      position: absolute;
      top: 100px;
      left: 30px;
      display: flex;
      flex-direction: column;
      width: 368px;
      min-height: 368px;
      background-image: url("../assets/images/pc_black/home/banner_background2.png");
      background-size: 100% 100%;
      background-position: center center;
      padding: 40px 15px 0 15px;
      z-index: 99;
      height: 50px;
    }
  }

  // >>推荐数字产品部分
  .recommend {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 81px;

    // -推荐顶部
    .recommend_top {
      display: flex;
      flex-direction: column;
      align-items: center;

      // --推荐字体样式
      .recommend_top_font {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 357px;
        height: 61px;
        background-image: url("../assets/images/pc_black/home/title_background.png");
        background-position: center center;
        background-size: cover;
        font-size: 28px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 28px;
      }

      // --推荐副标题样式
      .recommend_top_subtitle {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 16px;
        margin-top: 24px;
        opacity: 0.5;
      }
    }

    // -推荐底部
    .recommend_bottom {
      width: 100%;
      margin-top: 60px;

      .productsContent {
        display: flex;
      }
    }
  }

  // >>优势部分
  .advantage {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 100px;

    // -优势顶部
    .advantage_top {
      display: flex;
      flex-direction: column;
      align-items: center;

      // --优势字体样式
      .advantage_top_font {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 357px;
        height: 61px;
        background-image: url("../assets/images/pc_black/home/title_background.png");
        background-position: center center;
        background-size: cover;
        font-size: 28px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 28px;
      }

      // --优势副标题样式
      .advantage_top_subtitle {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 16px;
        margin-top: 24px;
        opacity: 0.5;
      }
    }

    // -优势底部
    .advantage_bottom {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-top: 80px;

      // --优势底部的每一项
      .advatage_bottom_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 346px;

        // 每一项里的图片
        .advatage_bottom_item_image {
          width: 70px;
          height: 80px;
        }

        // 每一项里的标题
        .advatage_bottom_item_title {
          font-size: 22px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 22px;
          margin-top: 40px;
        }

        // 每一项里的内容
        .advatage_bottom_item_content {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 24px;
          margin-top: 23px;
        }
      }
    }
  }

  // >>合作伙伴部分
  .friends {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 200px;

    // -合作伙伴顶部
    .friends_top {
      display: flex;
      flex-direction: column;
      align-items: center;

      // --优势字体样式
      .friends_top_font {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 357px;
        height: 61px;
        background-image: url("../assets/images/pc_black/home/title_background.png");
        background-position: center center;
        background-size: cover;
        font-size: 28px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 28px;
      }

      // --优势副标题样式
      .friends_top_subtitle {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 16px;
        margin-top: 24px;
        opacity: 0.5;
      }
    }

    // -合作伙伴底部
    .friends_bottom {
      position: relative;
      width: 100%;
      height: 120px;
      margin-top: 81px;
    }
  }

  // >>流星动画
  .meteor {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 103px;
    background: linear-gradient(180deg, #ffffff 0%, rgba(0, 255, 176, 0) 100%);
    box-shadow: 0px -5px 10px 0px rgba(0, 255, 176, 0.5);
    border-radius: 100px 100px 0px 0px;
    z-index: 99999;
    transform: rotateZ(-135deg);
  }

  .meteor1 {
    animation: kf_meteor1 6s ease-in infinite;
  }

  .meteor2 {
    animation: kf_meteor2 9s ease-in infinite;
  }

  .meteor3 {
    animation: kf_meteor3 7s ease-in infinite;
  }

  .meteor4 {
    animation: kf_meteor4 5s ease-in infinite;
  }

  .meteor5 {
    animation: kf_meteor5 10s ease-in infinite;
  }

  @keyframes kf_meteor1 {
    0% {
      top: -100px;
      right: -200;
      opacity: 1;
    }

    80% {
      opacity: 1;
    }

    100% {
      top: 2050px;
      right: 1720px;
      opacity: 0;
    }
  }

  @keyframes kf_meteor2 {
    0% {
      top: -100px;
      right: -100px;
      opacity: 1;
    }

    80% {
      opacity: 1;
    }

    100% {
      top: 1950px;
      right: 1820px;
      opacity: 0;
    }
  }

  @keyframes kf_meteor3 {
    0% {
      top: -100px;
      right: 0;
      opacity: 1;
    }

    80% {
      opacity: 1;
    }

    100% {
      top: 1850px;
      right: 1920px;
      opacity: 0;
    }
  }

  @keyframes kf_meteor4 {
    0% {
      top: -100px;
      right: 100px;
      opacity: 1;
    }

    80% {
      opacity: 1;
    }

    100% {
      top: 1750px;
      right: 2020px;
      opacity: 0;
    }
  }

  @keyframes kf_meteor5 {
    0% {
      top: -100px;
      right: 200px;
      opacity: 1;
    }

    80% {
      opacity: 1;
    }

    100% {
      top: 1650px;
      right: 2120px;
      opacity: 0;
    }
  }
}

@media screen and (max-width: 768px) {
  #Home {
    .meteor,
    .wrapper,
    .home_background {
      display: none;
    }

    .m_wrapper {
      display: block;
    }

    .head_background {
      display: block;
      background: url("../assets/images/mobile_black/home/head_background.png")
        no-repeat;
      background-position: center center;
      background-size: 100% 100%;

      .mTopDiv {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 117px;
        // margin-top: 90px;

        .left_logo {
          margin-left: 30px;

          img {
            width: 112px;
            height: 72px;
          }
        }

        .center_search {
          position: relative;
          display: flex;
          align-items: center;
          transform: translateY(2px);

          img {
            position: absolute;
            left: 25px;
            z-index: 999;
            width: 28px;
            height: 28px;
          }

          .search_box {
            display: flex;
            align-items: center;
            box-sizing: border-box;
            height: 64px;
            width: 50.6667vw;
            border-radius: 32px;
            background: rgba(255, 255, 255, 0.1);
            -webkit-backdrop-filter: blur(12px) !important;
            backdrop-filter: blur(12px) !important;
            font-size: 28px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.5);
            line-height: 28px;
            padding-left: 70px;
          }

          .hasAppSearch {
            width: 350px;
          }
        }

        .right_notice {
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 28px;
          margin-right: 30px;

          /deep/.noticeDot {
            .el-badge__content.is-fixed.is-dot {
              width: 14px;
              height: 14px;
              border: none;
              background-color: #f34c44;
            }
          }
        }

        .hasAppNotice {
          margin-right: 0px;
        }

        .right_app {
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 28px;
          margin-right: 30px;
        }
      }

      .mSwipe {
        display: block;
        // width: 335px;
        // height: 195px;
        // width: 700px;
        padding: 0 30px;
        width: 100%;
        height: 390px;
        // margin: 0 auto;
      }
    }

    // >>推荐产品部分
    .mShowProducts {
      display: block;
      width: 100%;
      padding: 0 30px;
      margin-bottom: 130px;
    }

    /deep/.bind_dialog {
      min-width: 500px;
      min-height: 350px;
      background: rgba(0, 0, 0, 1);
      border-radius: 10px;
      padding: 0;
      margin: 0;

      .dialog_center {
        display: flex;
        width: 100%;
        padding: 0 30px;

        .input_box {
          display: flex;
          flex-direction: column;
          width: 100%;

          input {
            border: none;
            width: 100%;
            height: 60px;
            background: none;
            font-size: 30px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 30px;
            margin-left: 30px;
          }

          span {
            font-size: 30px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 30px;
            text-align: left;
          }

          .first_line {
            display: flex;
            align-items: center;
            box-shadow: 0px 2px 0px 0px #333333;
            margin-top: 40px;

            span {
              min-width: 120px;
              word-break: keep-all;
            }
          }

          .second_line {
            display: flex;
            align-items: center;
            box-shadow: 0px 2px 0px 0px #333333;
            margin-top: 40px;

            span {
              min-width: 120px;
              word-break: keep-all;
            }
          }

          .mGetCode {
            position: absolute;
            right: 15px;
            top: 150px;
            border: none;
            background: none;
            color: #00ffb0;
            font-weight: 400;
            font-size: 28px;
          }

          .opacityHalf {
            opacity: 0.5;
          }
        }
      }

      .bottom_btn {
        position: absolute;
        bottom: 20px;
        display: flex;
        width: 100%;
        padding: 0;

        .van-button {
          flex: 1;
          height: 70px;
          background: none;
          border: none;
          font-size: 30px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 600;
        }

        .cancel_btn {
          color: rgba(255, 255, 255, 0.6);
        }

        .confirm_btn {
          color: #ffffff;
        }
      }
    }

    // 底部去认证
    .mAuthentication {
      position: fixed;
      left: 0;
      bottom: 178px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 84px;
      background: #2b2c2d;
      padding: 0 30px;

      .mAuthentication_left {
        display: flex;
        align-items: center;

        img {
          width: 24px;
          height: 24px;
        }

        span {
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          margin-left: 10px;
        }
      }

      /deep/.md-button {
        width: 104px;
        height: 44px;
        background: #00ffb0 !important;
        font-size: 24px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1d1f1f !important;
      }
    }

    .ios_mAuthentication {
      bottom: 175px !important;
    }

    .mAuthentication_bar {
      margin-bottom: 240px;
    }
  }
}
</style>
